<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
<script>
// 为什么React useState要使用数组而不是对象？
        /**
        *  const [count,setCount] = useState(0); useState中使用了js的解构赋值思想
        *  数组和对象的解构区别是？？？ 
        *      1.数组元素是按次序排列的,数组解构时变量的取值又数组元素的位置决定,变量名可以任意命名 
        *      2.对象属性么有次序,解构时变量名必须与属性同名,才能取到正确的值 
        *  因此使用数组会更加的灵活,可以任意的命名state和修改state的方法名         
        *
        * const [fruit, setfruit] = useState('banana');  js语法 数组解构
        * 即同时创建
        */ 


// 2021.08.20
// Fragment组件啥子？
/*
    理解起来就是我们在定义组件的时候_return里最外层包裹的div往往不想渲染到页面上  
    那么就可以考虑到用Fragment组件了_就和vue的template模板一样 
     <React.Fragment>和 <></>的区别 ？
     <></>语法不接受键值或属性  <React.Fragment>可以
    reder(){
        return(
            <React.Fragment>
                <h1>是简写语法</h1>
            </React.Fragment>
        )
    }
    简写语法：
    reder(){
        return(
            <>
                <h1>是简写语法</h1>
            </>
        )
    }

    注意react16中 render支持返回数组_这大大减少了节点嵌套：
    import React from "react";
    export default function(){
        return[
            <div>1</div>
            <div>2</div>
            XXXX...
        ]
    } 








*/


//   哪些数据改变会触发重新渲染？
/*
    组件的正常渲染是必须的，但当有不必要的渲染发生时，一方面对性能会有耗费，
另一方面也可能给用户造成页面卡顿的感觉。那么哪些数据的改变会触发渲染呢？

组件的状态 state 的值被改变，即触发了 setState 方法，默认会触发渲染。
当然也有特殊情况：当 setState 返回一样的引用时，并不会触发 render；
父组件的 props 被修改后，所有的子组件默认也会被重新渲染；
子组件的的 state 状态改变不会影响父组件，父组件不会重新渲染;
*/


</script>